<template>
  <div class="login_wrap">
    <loader :loading="loading">
      <!-- 用户名 -->
      <el-input class="input" v-model.lazy="username" placeholder="请输入学号"></el-input>
      <!-- 密码 -->
      <el-input class="input"  v-model.lazy="password" placeholder="请输入密码" show-password @keydown.native.enter="handleLogin"></el-input>
      <el-row>
        <el-button class="button" type="primary" @click="handleLogin"><i class="el-icon-mouse"></i>登录</el-button>
        <a class="link" @click="visible=true">使用须知</a>
      </el-row>
      <!-- 对话框 -->
      <el-dialog
        title="使用须知"
        :visible.sync="visible"
        width="40%"
        >
        <div class="content">
          <div>1、本站仅用于学习交流，不以营利为目的</div>
          <div>2、本站开发的初衷是让广大学子更方便地查询学校教务系统的信息，待技术成熟后进而开发相应的微信小程序</div>
          <div>3、本站后台利用GZHU官方的接口获取数据，用户相关信息全部储存在本地浏览器中，<span style="color:red">没有</span>保存用户的任何信息，请大家放心使用，如有疑问，请联系vx:AmbitiousJun</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="visible = false">确 定</el-button>
        </span>
      </el-dialog>
    </loader>
  </div>
</template>

<script>
  import Loader from '@/components/Loader'
  // 网络请求模块
  import { getIndex, login } from '@/network/index'
  // 加密函数
  import { strEnc } from '@/assets/js/des'

  export default {
    name: 'Login',
    components: {
      Loader
    },
    data() {
      return {
        loginParams: {
          ul: 0,
          pl: 0,
          lt: '',
          jsessionId: '',
          sfCookie27: '',
          execution: '',
          rsa: '',
          clientId: null,
        },
        username: '',
        password: '',
        loading: false,
        // 控制对话框的显示
        visible: false        
      }
    },
    watch: {
      username(val) {
        this.loginParams.ul = val.length
      },
      password(val) {
        this.loginParams.pl = val.length
      }
    },
    beforeRouteEnter(to, from, next) {
      // 每次进入登录页时都要重新获取初始参数
      getIndex().then(res => {
        next(vm => {
          setTimeout(() => {
            // 组件创建完成后得到的回调
            vm.loginParams.lt = res.data.lt
            vm.loginParams.jsessionId = res.data.jsessionId
            vm.loginParams.sfCookie27 = res.data.sfCookie27
            vm.loginParams.execution = res.data.execution
            vm.loginParams.clientId = res.data.clientId
          },0)
        })
      })
    },
    methods: {
      encodeUser() {
        // 加密用户名密码
        let str = this.username + this.password + this.loginParams.lt
        let rsa = strEnc(str, '1', '2', '3')
        this.loginParams.rsa = rsa
      },
      handleLogin() {
        this.loading = true
        // 登录账号
        this.encodeUser()
        // 发送请求进行登录
        login(this.loginParams).then(res => {
          if(res.data === '') {
            this.$notify.error({
              title: '登录失败',
              message: '请检查用户名和密码是否正确'
            })
            // 重新拉取登录参数
            getIndex().then(res => {
              this.loginParams.lt = res.data.lt
              this.loginParams.jsessionId = res.data.jsessionId
              this.loginParams.sfCookie27 = res.data.sfCookie27
              this.loginParams.execution = res.data.execution
              this.loginParams.clientId = res.data.clientId
            })
          }else {
            let CASTGC = res.data.CASTGC
            // 更新token到全局状态
            this.$store.commit('handleLogin', CASTGC)
            window.localStorage.setItem('CASTGC',CASTGC)
            // 将用户的账号和密码保存到本地缓存中
            window.localStorage.setItem('gzhu-username', this.username)
            window.localStorage.setItem('gzhu-password', this.password)
            this.$router.replace('/home')
          }
          this.loading = false
        })
      }
    }
  }
</script>

<style scoped>
  .login_wrap {
    width: 400px;
    text-align: center;
    margin: 50px auto 0;
  }

  .button {
    margin-top: 6px;
  }

  .input {
    margin: 10px 0;
  }

  .link {
    margin-left: 50px;
    color: #177cb0;
    border-bottom: 1px solid;
    cursor: pointer;
  }

  .content div{
    text-align: left;
    font-size: 16px;
    margin-top: 10px;
    font-weight: 500;
  }
</style>